<template>
  <!-- 折线图图   -->
  <div id="main" ref="pieChart" class="pieChart" style="width: 100%; height: 100%" />
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'PieChart',
  data() {
    return {
      property: 'value'
    }
  },
  mounted() {
    this.drawChart()
  },
  methods: {
    drawChart() {
      //   准备好DOM 初始化 echart 实例
      //   var myChart = this.$echarts.init(document.getElementById('main'))
      // 同一个页面使用多次会出现数据覆盖的问题 只会显示一个页面 解决方法使用ref
      const myChart = this.$echarts.init(this.$refs.pieChart)
      //   绘制图标
      myChart.setOption({
        series: [
          {
            name: 'Access From',
            type: 'pie',
            // 放大图形
            radius: ['120%', '140%'],
            // 移动下位置  套住50%文字
            center: ['48%', '80%'],
            // avoidLabelOverlap: false,

            labelLine: {
              show: false
            },
            startAngle: 180,
            // 鼠标经过不变大
            hoverOffset: 0,
            data: [
              {
                value: 100,
                itemStyle: {
                  // 颜色渐变#00c9e0->#005fc1
                  color: new echarts.graphic.LinearGradient(
                    // (x1,y2) 点到点 (x2,y2) 之间进行渐变
                    0,
                    0,
                    0,
                    1,
                    [
                      { offset: 0, color: '#00c9e0' }, // 0 起始颜色
                      { offset: 1, color: '#005fc1' } // 1 结束颜色
                    ]
                  )
                }
              },
              { value: 100, itemStyle: { color: '#12274d' }},
              {
                value: 200,
                itemStyle: {
                  color: 'transparent'
                }
              }
            ]
          }
        ]
      })
      // 监听 window窗口大小变化的事件 自适应
      window.onresize = function() {
        // console.log('屏幕变化了')
        myChart.resize()
      }
    }
  }
}
</script>
<style lang="scss" scoped>
// .lineEchart {
//   width: 300px;
//   height: 200px;
// }
</style>

